<template>
  <div>
    <div class="my-report" v-if="isMan">
      <footer class="tabbar">
        <div class="share-btn">
          <mt-button @click.native="routerToAdd">我要爆料</mt-button>
        </div>
      </footer>
      <div class="scroll-block">
        <div class="report-item" v-for="(v, k) in reportList" :key="k">
          <div class="content">
            <div class="image"></div>
            <div class="section">
              <div class="title">{{v.name}}</div>
              <div class="desc">{{v.desc}}</div>
            </div>
          </div>
          <div class="report-detail">
            <div class="title">推荐理由</div>
            <div class="content" ref="detail">{{v.content}}</div>
            <div class="looking-more" @click="showContent(k)">
              <span class="text">查看更多</span>
              <img src="/src/assets/icons/arrow-down.png" class="icon">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="apply-report" v-if="!isMan">
      <div class="center-content" v-html="applyInfo.text"></div>
      <div class="share-btn">
        <mt-button @click.native="toBeReport" :disabled="!applyInfo.can_apply">{{applyInfo.btn_text}}</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'

  export default {
    name: 'MyReport',
    data () {
      return {
        isMan: false,
        applyInfo: {},
        reportList: []
      }
    },
    methods: {
      getReportList () {
        let params = {
          page: 1,
          limit: 10
        }
        this.$post('/vue/report/get_user_report_list', params).then(data => {
          this.reportList = data.list
        })
      },
      hideContent () {
        let detail = this.$refs.detail
        if (detail !== undefined) {
          for (let i = 0; i < detail.length; i++) {
            if (detail[i].offsetHeight >= 72) {
              detail[i].parentNode.classList.add('short')
            }
          }
        }
      },
      showContent (key) {
        this.$refs.detail[key].parentNode.classList.remove('short')
      },
      checkReport () {
        this.$post('/vue/report/check_if_reporter', '').then(data => {
          this.applyInfo = data
          this.isMan = data.is_man
          this.getReportList()
        })
      },
      toBeReport () { // 申请成为惠大使
        this.$post('/vue/report/be_reporter', '').then(data => {
          msg('申请成功')
          this.checkReport()
        })
      },
      routerToAdd () {
        this.$router.push({name: 'MyReportAdd'})
      }
    },
    mounted () {
      this.checkReport()
    },
    updated () {
      this.hideContent()
    }
  }
  const msg = (m) => {
    Toast({
      message: m,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(217, 117, 99);
  @c-blue: rgb(108, 184, 222);

  .my-report {
    background-color: #FFF;
    .scroll-block {
      height: calc(~'100vh - 57px');
      overflow-x: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }
    .report-item {
      padding: 12px 0 0 12px;
      text-align: left;
      background: #FFF;
      &::after {
        display: block;
        content: '';
        width: 100vw;
        height: 8px;
        background-color: rgb(240, 244, 247);
        margin-left: -12px;
      }
      // &:last-child::after {
      //   display: none;
      // }
      .content {
        border-bottom: 1px solid @c-235;
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        align-content: flex-start;
        justify-content: space-between;
        .image {
          display: block;
          flex: 0 0 auto;
          width: 22%;
          padding-bottom: 22%;
          height: 0;
          border-radius: 8px;
          background-image: url('/src/assets/logo.png');
          background-size: 100% 100%;
        }
        .section {
          display: block;
          flex: 0 0 auto;
          width: 71%;
          margin-left: 3.3%;
          padding-right: 3.3%;
          .title {
            font-size: 13px;
            line-height: 24px;
            font-weight: bold;
            color: @c-124;
          }
          .desc {
            font-size: 12px;
            line-height: 20px;
            color: @c-red;
            margin-top: 12px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .report-detail {
        padding-right: 12px;
        text-align: left;
        transition: all .5s;
        .title {
          margin: 12px 0;
          font-size: 13px;
          line-height: 24px;
          font-weight: bold;
          color: @c-124;
        }
        .content {
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          border: 0;
          text-align: left;
        }
        .looking-more {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          font-size: 0;
          padding: 12px 0;
          display: none;
          .text {
            font-size: 12px;
            line-height:24px;
            color: rgb(108, 184, 222);
            display: inline-block;
            vertical-align: middle;
          }
          .icon {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
          }
        }
        &.short {
          .content {
            height: 72px;
            padding-bottom: 0;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            word-break: break-all;
            overflow: hidden;
          }
          .looking-more {
            display: block;
            position: relative;
          } 
        }
      }
    }
    .tabbar {
      overflow: hidden;
      height: 0;
      .share-btn {
        padding: 8px 0;
        border-top: 1px solid @c-226;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-color: #FFF;
        img {
          width: 24px;
          height: 24px;
        }
        .mint-button {
          height: 40px;
          padding: 6px 0;
          width: 168px;
          text-align: center;
          background-color: @c-blue;
          border-radius: 20px;
          .mint-button-icon {
            line-height: 0;
          }
          .mint-button-text {
            font-size: 13px;
            line-height: 24px;
            color: #FFF;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
  }
  /* 惠大使申请 */
  .apply-report {
    height: calc(~'100vh - 57px');
    background-color: #FFF;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content:center;
    .center-content {
      padding: 24px;
      text-align: left;
      font-size: 12px;
      line-height: 24px;
      color: @c-124;
    }
    .share-btn {
      padding: 8px;
      border-top: 1px solid @c-226;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #FFF;
      z-index: 5;
      img {
        width: 24px;
        height: 24px;
      }
      .mint-button {
        height: 40px;
        padding: 7px 0;
        width: 168px;
        text-align: center;
        background-color: @c-blue;
        border-radius: 20px;
        .mint-button-icon {
          line-height: 0;
        }
        .mint-button-text {
          font-size: 13px;
          line-height: 24px;
          color: #FFF;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
</style>